<template>
    <div class="selectProduct">
        <el-dialog title="选择商品" :visible.sync="showSelectProductCon" :before-close="handelClose" @open="handelOpen">
            <div class="dialog-search-con">
                <div class="dialog-search-item">
                    <div class="dialog-search-item-title">商品编号</div>
                    <div class="dialog-search-item-input">
                        <el-input size="mini" v-model="formData.productNo" placeholder="请输入商品编号"></el-input>
                    </div>
                </div>
                <div class="dialog-search-item">
                    <div class="dialog-search-item-title">商品名称</div>
                    <div class="dialog-search-item-input">
                        <el-input size="mini" v-model="formData.productName" placeholder="请输入商品名称"></el-input>
                    </div>
                </div>
                <div class="dialog-search-item">
                    <el-button size="mini" type="primary" @click="handleSearch">查询</el-button>
                    <el-button size="mini" type="primary" @click="handleClear">清空</el-button>
                </div>
            </div>
            <div>
                <el-table :data="productData" border size="mini" @selection-change="handleSelectionChange"
                    :header-cell-style="{background:'#f8f8f8'}" style="width: 100%">
                    <el-table-column type="selection" width="50" align="center"></el-table-column>
                    <el-table-column type="index" label="序号" width="50" align="center" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column property="productNo" label="商品编号" width="" align="center" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column property="productName" label="商品名称" width="" align="center" :show-overflow-tooltip="true"></el-table-column>
                </el-table>
            </div>
            <div class="pagination">
                <el-pagination @current-change="handleCurrentChange" :current-page.sync="formData.pageNo" :page-size="formData.pageSize"
                    layout="total, prev, pager, next" :total="total"></el-pagination>
            </div>
            <div class="dialog-btn-con">
                <el-button size="small" type="primary" @click="handelSure">确定</el-button>
                <el-button size="small" @click="handelClose">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { queryProductInfo } from "@/common/service/productManagement/goodsInfo.js";
export default {
    name: "selectProduct",
    data() {
        return {
            formData: {
                productNo: "", //商品编号
                productName: "", //商品名称
                pageNo: 1,
                pageSize: 10
            },
            selectionData: [], //勾选框勾选的数据
            productData: [], //商品表格数据
            total: null //商品表格数据总条数
        };
    },
    created() {},
    methods: {
        /*-----------------------------查询操作-----------------------------*/
        //查询商品表格数据
        _queryProductInfo() {
            queryProductInfo(this.formData)
                .then(res => {
                    this.productData = res.content;
                    this.total = res.totalElements;
                })
                .catch(err => {
                    this.$message.error(err.message);
                });
        },
        //页码切换
        handleCurrentChange(val) {
            this.formData.pageNo = val;
            this._queryProductInfo();
        },
        //点击查询
        handleSearch() {
            this.formData.pageNo = 1;
            this.formData.pageSize = 10;
            this._queryProductInfo();
        },
        //点击清空
        handleClear() {
            this.formData = {
                productNo: "",
                productName: "",
                pageNo: 1,
                pageSize: 10
            };
            this.$message({
                type: "success",
                message: "清空成功!"
            });
            this._queryProductInfo();
        },

        /*-----------------------------保存选择的商品操作-----------------------------*/
        handelSure() {
            if (this.selectionData.length) {
                this.$emit("sure", JSON.stringify(this.selectionData));
            } else {
                this.$message.error("商品不能为空，请选择商品");
            }
        },

        /*-----------------------------监测勾选框操作-----------------------------*/
        handleSelectionChange(val) {
            this.selectionData = val;
        },

        /*-----------------------------关闭弹窗-----------------------------*/
        handelClose() {
            this.$emit("close", false);
        },

        /*-----------------------------打开弹窗-----------------------------*/
        handelOpen() {
            this.formData = {
                productNo: "",
                productName: "",
                pageNo: 1,
                pageSize: 10
            };
            // 初始化商品列表数据
            this._queryProductInfo();
        }
    },
    props: {
        showSelectProductCon: {
            type: Boolean,
            default: false
        }
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.dialog-search-con {
    padding-top: 15px;
}
</style>